<template>
  <div>
    <ARow class="enter-x">
      <ACol :span="12">
        <Card class="mr-1 card-brief" >
          <span class="card-title">基本信息</span>
          <div :class="`${prefixCls}-info`">
            <div :class="`${prefixCls}-header-img`">
              <Avatar  :src="userInfo.avatar || headerImg" :size="84" shape="square" class="!mx-auto !block" />
            </div>
            
            <Description style="width: 100%;" @register="register" />
          </div>
         
        </Card>
      </ACol>
      <ACol :span="12">
        <Card class="ml-1 card-brief">
          <span class="card-title">权益信息</span>
          <div :class="`${prefixCls}-info`">
            <Description style="width: 100%;" @register="registerEquity" />
          </div>
        </Card>
      </ACol>

      <ACol :span="24">
        <Card class="mt-2 card-brief">
          <span class="card-title">账户明细</span>
          <div :class="`${prefixCls}-account-detail`">
            34234s
          </div>
        </Card>
      </ACol>
    </ARow>
  </div>
</template>
<script lang="ts" setup>
import { Card, Col, Row } from 'ant-design-vue';
import {ref, computed, unref, useAttrs, onMounted } from 'vue';
import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
import { Description, DescItem, useDescription } from '/@/components/Description/index';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRoute, useRouter } from "vue-router"
import { getUserDetails } from '/@/api/member/user.api';
import { baseInfoDescSchema, quityInfoDescSchema } from './data';

const router = useRouter()
let id = router.currentRoute.value.query?.id
console.log("currentRoute.params: " + id);

const { prefixCls } = useDesign('member-detail');
const ACol = Col
const ARow = Row
const userInfo = ref<any>({})
const headerImg = "/default-avatar.png"


const [register] = useDescription({
  bordered: false,
  data: userInfo,
  schema: baseInfoDescSchema,
});

const [registerEquity] = useDescription({
  bordered: false,
  data: userInfo,
  schema: quityInfoDescSchema,
});

onMounted(async () => {
  userInfo.value = await getUserDetails({ id })

})
</script>

<style lang="less">
@prefix-cls: ~'@{namespace}-member-detail';

.@{prefix-cls} {
  &-info {
    display: flex;
    margin-top: 10px;
    height: 220px;
  }

  &-account-detail {
    display: flex;
    margin-top: 10px;
  }


  &-header-img {
    margin-right: 15px;
  }
}
</style>
